<template>
  <main>
    <div>
      <el-text>设备逻辑名称：</el-text>
      <el-input
        style="margin-top: 4px"
        maxlength="20"
        type="text"
        placeholder="请输入一个设备逻辑名"
        v-model="deviceName"
      ></el-input>
    </div>
    <div style="margin-top: 10px">
      <el-text>PLC 类型：</el-text>
      <el-select style="margin-top: 4px" placeholder="请选择设备类型" v-model="deviceType">
        <el-option
          v-for="typeItem in deviceTypes"
          :key="typeItem"
          :value="typeItem"
          :label="typeItem"
        ></el-option>
      </el-select>
    </div>
    <div style="margin-top: 10px">
      <el-text>IP 地址 :</el-text>
      <el-input
        style="margin-top: 4px"
        v-model="ipAddress"
        maxlength="15"
        placeholder="请输入 IP 地址"
        type="text"
      ></el-input>
    </div>
    <div style="margin-top: 10px">
      <el-text>IP 端口：</el-text>
      <el-input
        style="margin-top: 4px"
        type="number"
        v-model="port"
        placeholder="请输入 IP 端口"
      ></el-input>
    </div>
    <div v-if="isSiemensDevice" style="margin-top: 10px">
      <el-text>槽编号：</el-text>
      <el-input
        style="margin-top: 4px"
        type="number"
        v-model="slot"
        placeholder="请输入 IP 端口"
      ></el-input>
    </div>
    <div v-if="isSiemensDevice" style="margin-top: 10px">
      <el-text>机架号：</el-text>
      <el-input
        style="margin-top: 4px"
        type="number"
        v-model="rack"
        placeholder="请输入 IP 端口"
      ></el-input>
    </div>
  </main>
</template>
  
  <script setup lang="ts">
import { computed } from 'vue';
import { deviceTypes } from '@/constants/device-server-client';

const isSiemensDevice = computed(() => {
  const value = deviceType.value as string;
  if (value != null && value.startsWith('Siemens')) {
    return true;
  }
  return false;
});

const deviceName = defineModel('deviceName', {
  required: true
});

const port = defineModel('port', {
  required: true
});

const deviceType = defineModel('deviceType', {
  required: true
});

const ipAddress = defineModel('ipAddress', {
  required: true
});

const slot = defineModel('slot', {
  type: Number,
  required: true,
  default: 0
});

const rack = defineModel('rack', {
  type: Number,
  required: true,
  default: 0
});
</script>
  